<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/questionBank' }">题库管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/questionBank/dateliBank">添加题库</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="describe">
      <el-descriptions class="margin-top" :column="3" title="添加题库" border>
        <template #extra>
          <el-button type="primary" @click="add">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题库名</div>
          </template>
          <el-input v-model="bankname" placeholder="请输入题库名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题库类型</div>
          </template>
          <el-select v-model="qblabel" placeholder="题库类型">
            <el-option label=".Net" value=".Net" />
            <el-option label="JAVA" value="JAVA" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题库容量</div>
          </template>
          <el-input-number v-model="num" :min="1" :max="100000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题库等级</div>
          </template>
          <el-input-number v-model="lv" :min="1" :max="100000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">描述</div>
          </template>
          <el-input v-model="describe" :rows="2" type="textarea" placeholder="题库描述" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { AddBank } from "@/utils/Exam/bank/addbank";
import { ElMessage, ElMessageBox } from "element-plus";
import { QuestionBank } from "@/api/Product/exaam";
import router from '@/router'

const _exam = new QuestionBank();

export default defineComponent({
  setup() {
    const data = reactive<AddBank>({
      bankname: "",
      num: 0,
      lv: 0,
      describe: "",
      qblabel: "",
    });
    const methods = {
      add() {
        const questionbank = {
          qbname: data.bankname,
          qbexplain: data.describe,
          qbcount: data.num,
          qblv: data.lv,
          qblabel: data.qblabel
        };
        _exam.AddQuestionBank(questionbank).then(res => {
        })
        ElMessageBox.confirm("还要继续添加嘛").then(res => {
        }).catch(r => {
          router.push("/questionBank/addBank");
        })
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
</style>
